import {View, Text, StyleSheet, Button} from 'react-native';
import React from 'react';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Icon from '@react-native-vector-icons/ionicons';
import LinearGradient from 'react-native-linear-gradient';
import * as Animatable from 'react-native-animatable';
import {useSelector, useDispatch} from 'react-redux';
import {todoAdded, todoToggled, fetchPosts} from '../redux/todo.js';

export default function Home() {
  const insets = useSafeAreaInsets();

  const dispatch = useDispatch();
  const count = useSelector(state => state.todos);

  console.log('count', count);

  const addAsync = () => {
    dispatch(fetchPosts('aa'));
  };

  const add = () => {
    console.log(2131);
    dispatch(todoAdded({id: 'add'}));
  };

  const toggle = () => {
    dispatch(todoToggled());
  };

  return (
    <View
      style={[
        styles.container,
        {
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
        },
      ]}>
      <Icon name="accessibility" size={30} color="#900" />
      <Icon name="accessibility-outline" size={30} color="#900" />
      <Text>
        Home - {count.status} - {count.value}
      </Text>
      <Button title="点击 Add Async" onPress={addAsync} />
      <Button title="点击 Add" onPress={add} />
      <Button title="点击 toggle" onPress={toggle} />

      <LinearGradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.linearGradient}>
        <Text style={styles.buttonText}>Sign in with Facebook</Text>
      </LinearGradient>

      <Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>
      <Animatable.Text
        animation="slideInDown"
        iterationCount={5}
        direction="alternate">
        Up and down you go
      </Animatable.Text>
    </View>
  );
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  linearGradient: {
    height: 200,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});
